{{#contentFor "Styles"}}
<link rel="stylesheet" type="text/css" href="/styles/bootstrap-datetimepicker.css" />
{{/contentFor}}
{{#contentFor "Scripts"}}
<script type="text/javascript" src="/scripts/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="/scripts/echarts.min.js"></script>
<script type="text/javascript" src="/scripts/common.js"></script>
<script type="text/javascript">
    var myChart;
    var intervalHandler;

    $(function () {
        // 基于准备好的dom，初始化echarts实例
        myChart = echarts.init(document.getElementById('searchResult'));

        OnSearch();
    });

    function OnSearch() {
        if(intervalHandler){
            clearInterval(intervalHandler);

            // 释放定时任务句柄。
            intervalHandler = null;
        }

        var from = $('#from').val();
        var to = $('#to').val();

        if (from == '' || to == '') {
            layer.msg('查询时间范围都必须输入！');

            return;
        }

        if (Date.parse(from) >= Date.parse(to)) {
            layer.msg('查询时间范围的结束时间必须大于开始时间！');

            return;
        }

        var items = $('#frmSearch').serializeArray();
        var data = {};

        items.forEach(function (item) { data[item.name] = item.value; });

        var yIndex = 0;

        // 指定图表的配置项和数据
        var option = {
            grid: {
                top: '20%'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: false
                }
            },
            legend: {
                data: []
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    formatter: '{value}'
                },
                data: []
            },
            yAxis: [
                {
                    type: 'value',
                    name: '百分比',
                    min: 0,
                    max: 100,
                    position: 'left',
                    axisLabel: {
                        formatter: '{value}%'
                    }
                },
                {
                    type: 'value',
                    name: '流量',
                    position: 'right',
                    axisLabel: {
                        formatter: '{value}字节/秒'
                    }
                }
            ],
            series: []
        };
        {{#each metrics}}
        data['metricName'] = '{{name}}';
        option.legend.data.push('{{text}}');

        $.ajax({
            url: '/api/hwcloud/ecs/info/'+data.ecsId,
            type: 'POST',
            data: data,
            dataType: 'json',
            success: function (rs) {
                option.xAxis.data = rs.datapoints.map(function (m) {
                    var date = new Date(m.timestamp);

                    return date.format('yyyy-MM-dd HH:mm');
                });

                option.series.push({
                    name: '{{text}}',
                    type: 'line',
                    yAxisIndex: '{{unit}}' == '%' ? 0 : 1,
                    data: rs.datapoints.map(function (m) {
                        return m[$('#filter > option:selected').val()];
                    })
                });

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        });
        {{/each}}

        $('#bgSuccess span:first').html(`<b>数据更新时间：</b>${new Date().format('yyyy-MM-dd HH:mm:ss')}`);

        var cutDownSecends = 2*60;
        intervalHandler = setInterval(function(){
            if(cutDownSecends<=0){
                clearInterval(intervalHandler);

                // 释放定时任务句柄。
                intervalHandler = null;

                OnSearch();
            }

            $('#bgSuccess span:last').html(`<b>距下一次更新剩余：</b>${cutDownSecends--}秒`);
        }, 1000);
    }
</script>
{{/contentFor}}

<div class="card card-primary">
    <div class="card-header">监控查询 </div>
    <div class="card-body">
        <form id="frmSearch" method="POST" class="form-horizontal">
            <div class="row">
                <div class="col-3">
                    <div class="input-group">
                        <label class="input-group-text" for="ecsId">弹性云主机</label>
                        <select id="ecsId" name="ecsId" onchange="OnSearch()" class="form-select">
                            {{#each groupedServers}}
                            <optgroup label="{{describle}}">
                                {{#each items}}
                                    <option value="{{id}}" data-inner-ip="{{innerIP}}" data-outer-ip="{{outerIP}}">{{name}}</option>
                                {{/each}}
                            </optgroup>
                            {{/each}}
                        </select>
                    </div>
                </div>
                <div class="col-2">
                    <div class="input-group">
                        <label for="period" class="input-group-text">监控粒度</label>
                        <select id="period" name="period" class="form-select">
                            <option value="1">实时</option>
                            <option value="300" selected>5分钟</option>
                            <option value="1200">20分钟</option>
                            <option value="3600">1小时</option>
                            <option value="14400">4小时</option>
                            <option value="86400">1天</option>
                        </select>
                    </div>
                </div>
                <div class="col-2">
                    <div class="input-group">
                        <label for="filter" class="input-group-text">聚合方式</label>
                        <select id="filter" name="filter" class="form-select">
                            <option value="max">最大</option>
                            <option value="min">最小</option>
                            <option value="average" selected>平均</option>
                            <option value="sum">求和</option>
                            <option value="variance">方差</option>
                        </select>
                    </div>
                </div>
                <div class="col-5">
                    <div class="input-group range">
                        <label class="input-group-text">区间</label>
                        <input id="from" name="from" type="datetime" value="{{fromDefault}}" dp-end="{{fromDefault}}" class="form-control" style="width:137px;"/>
                        <span class="input-group-addon-extra">到</span>
                        <input id="to" name="to" type="datetime" value="{{toDefault}}" dp-end="{{toDefault}}" class="form-control" style="width:137px;"/>
                        <button type="button" class="btn btn-primary" onclick="OnSearch()">
                            <i class="bi bi-search"></i> 查询
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div id="searchResult" style="width: 100%;height:500px;"></div>
<div id="bgSuccess" class="bg-success">
    <span></span>
    <span style="margin-left:50px;" class="text-danger"></span>
</div>